<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="content">
      <div class="box con_left">
        <div class="lookBlock" v-for="item in leftList" :key="item.topicId">
          <img :src="item.picUrl" alt="">
          <h2>{{item.title}}</h2>
          <div class="lookDetail">
            <div class="detail-left">
              <img :src="item.avatar" alt="">
              <i>{{item.nickname}}</i>
            </div>
            <div class="detail-right">
              <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
              <i>{{item.readCount | examine}}</i>
            </div>
          </div>
        </div>
      </div>
      <div class="box con_right">
        <div class="lookBlock" v-for="item in rightList" :key="item.topicId">
          <img :src="item.picUrl" alt="">
          <h2>{{item.title}}</h2>
          <div class="lookDetail">
            <div class="detail-left">
              <img :src="item.avatar" alt="">
              <i>{{item.nickname}}</i>
            </div>
            <div class="detail-right">
              <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
              <i>{{item.readCount | examine}}</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script>
import Vue from 'vue'
import { List } from 'vant'

Vue.use(List)
export default {
  data () {
    return {
      leftList: [],
      rightList: [],
      // 请求页码
      pageNum: 1,
      // 确认加载状态 每次加载完毕都要设为false
      loading: false,
      // 确认是否全部请求完毕 全部获取后设为ture
      finished: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      this.$http.get('/api/topic/v1/find/recAuto.json?page=' + this.pageNum + '&size=2&exceptIds=')
        .then((res) => {
          // 获取数据将数组展开利用。。。展开运算符合并到一起
          this.leftList = [...this.leftList, ...res.data.result[0].topics]
          this.rightList = [...this.rightList, ...res.data.result[1].topics]
          // 加载状态结束
          this.loading = false
          // 数据全部加载是否完成
          if (this.pageNum < 20) {
            // 页码小于20 pageNum++
            this.pageNum++
          } else {
            // 页码大于20请求全部完成 finished设为true
            this.finished = true
          }
        })
    }
  },
  filters: {
    // 过滤查看数量
    examine: function (value) {
      // 大于10000
      if (value > 10000) {
        return parseInt(Number(value) / 1000) + 'K'
      } else {
        return value
      }
    }
  }
}
</script>

<style lang='less' scoped>
.content{
  display: flex;
  margin-top: .2rem;
  padding: 0 .2rem;
  justify-content: space-between;
  .box{
    .lookBlock{
      width: 3.45rem;
      background-color: #fff;
      border-radius: .2rem;
      margin-bottom: .2rem;
      img{
        width: 3.45rem;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
      }
      h2{
        font-size: .28rem;
        color: #333;
        padding: .15rem .15rem 0;
      }
      .lookDetail{
        height: .89rem;
        padding: 0 .2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div{
          display: flex;
          align-items: center;
        }
        .detail-left{
          img{
            width: .48rem;
            height: .48rem;
            border-radius: 50%;
          }
          i{
            font-size: .22rem;
            color: #7f7f7f;
            margin-left: .1rem;
          }
        }
        .detail-right{
          img{
            width: .32rem;
            height: .32rem;
          }
          i{
            font-size: .24rem;
            color: #7f7f7f;
          }
        }
      }
    }
  }
}
</style>
